<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增排班表')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <script src="/js/jquery.min.js"></script>
    <link href="/js/tagit/jquery.tagit.css" rel="stylesheet" type="text/css"/>
    <link href="/js/tagit/tagit.ui-zendesk.css" rel="stylesheet" type="text/css"/>
    <script src="/js/tagit/jquery-ui.min.js"></script>
    <script src="/js/tagit/tag-it.js"></script>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="col-md-12" style="margin-bottom: 25px">
        <div class="col-md-3" style="font-size: 15px">注：白色页签为所要提交的数据类型</div>
        <div class="col-md-6">
            <div class="btn-group-md"
                 style="display: grid;align-items: center;
                 grid-template-columns: repeat(2, 1fr);"
                 role="group">
                <a id="tabBarClick1" class="btn btn-default" onclick="tabBarClick('1')">
                    <i class="fa fa-plus"></i> 货损添加
                </a>
                <a id="tabBarClick2" class="btn btn-success" onclick="tabBarClick('2')">
                    <i class="fa fa-plus"></i> 其他费用添加
                </a>
            </div>
        </div>
        <div class="col-md-3"></div>
    </div>
    <form class="form-horizontal m" id="form-huosun-add">
        <div class="form-group">
            <label class="col-sm-3 control-label">货损备注
                ：</label>
            <div class="col-sm-8">
                <textarea name="beizhu" class="form-control"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">损坏日期：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="dateForString"
                           th:value="${#dates.format(#dates.createNow(),'yyyy-MM-dd HH:mm:ss')}"
                           placeholder="yyyy-MM-dd HH:mm:ss"
                           class="form-control" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-4"></div>
            <label class="col-sm-4 control-label" style="text-align: center;font-weight: bold;font-size: large"></label>
            <div class="col-sm-4"><label for="shangpinbianhao">
            </label><input name="shangpinbianhao" id="shangpinbianhao" hidden type="text">
            </div>
            <div class="col-sm-12" style="margin-top: -5%">
                <div class="table-box">
                    <div>
                        <a onclick="addRow()">添加行</a>
                        <a onclick="removeRow()">删除行</a>
                    </div>
                    <datalist id="shangpinMenlist" th:with="type=${@shangpinguanliMapper.selectShangpingList()}">
                        <option th:each="lists : ${type}"
                                th:text="${lists.getShangpinming()+'|'+lists.getShengchanchangshang()+'|'+lists.getShangpinguigekuan()+'*'+lists.getShangpinguigegao()+'|'+lists.getShangpinkaixiang()}"
                                th:value="${lists.getShangpinbianhao()}"></option>
                    </datalist>
                    <div style="overflow: scroll;">
                        <table id="bootstrap-table" style="min-width: 1000px;overflow-x: scroll">
                        </table>
                    </div>
                </div>
                <script th:inline="javascript">
                    $(function () {
                        var options = {
                            showToggle: false,
                            showSearch: false,
                            cardView: false,
                            showColumns: false,
                            showPaginationSwitch: false,     //显示切换分页按钮
                            showRefresh: false,      //显示刷新按钮
                            pagination: false,
                            columns: [{
                                checkbox: true
                            },
                                {
                                    field: 'shangpinming',
                                    title: '商品名',
                                    align: "center",
                                    width: "200px",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input id='" + index + "shangpinming' placeholder='商品名' list='shangpinMenlist'" +
                                            " class='form-control'  value='" + (value === undefined ? '' : value) + "' onblur='getValuesName(" + index + ")'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                }, {
                                    field: 'shangpinbianhao',
                                    title: '商品编号',
                                    align: "center",
                                    visible: false,
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input id='" + index + "shangpinbianhao' placeholder='商品编号' " +
                                            " class='form-control'  value='" + (value === undefined ? '' : value) + "'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                },
                                {
                                    field: 'shangpinleibie',
                                    title: '商品类别',
                                    align: "center",
                                    width: "150px",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input readonly id='" + index + "shangpinleibie' placeholder='商品类别' " +
                                            "class='form-control'  value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                },
                                {
                                    field: 'shengchanchangshang',
                                    title: '生产厂商',
                                    align: "center",
                                    width: "200px",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<input id='" + index + "shengchanchangshang' placeholder='生产厂商' " +
                                            " class='form-control'  value='" + (value === undefined ? '' : value) + "'>");
                                        return action.join(''); //formatter 这里，里面的value一定要加，不然写值的时候会写不上去
                                    }
                                },
                                {
                                    field: 'shangpinguigekuan',
                                    title: '规格宽',
                                    align: "center",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<div style='display: flex;align-items: center'><input id='" + index + "shangpinguigekuan' placeholder='规格宽' " +
                                            "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'></div>");
                                        return action.join('');
                                    }
                                },
                                {
                                    field: 'shangpinguigegao',
                                    title: '规格高',
                                    align: "center",
                                    formatter: function (value, row, index) {
                                        const action = [];
                                        action.push("<div style='display: flex;align-items: center'><input id='" + index + "shangpinguigegao' placeholder='规格高' " +
                                            "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'></div>")
                                        return action.join('');
                                    }
                                },
                                {
                                    field: 'shangpinkaixiang',
                                    title: '开向',
                                    align: "center",
                                    width: "100px",
                                    formatter: function (value, row, index) {
                                        return ["<input id='" + index + "shangpinkaixiang' placeholder='开向' " +
                                        "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>"]
                                    }
                                }, {
                                    field: 'shangpinshuliang',
                                    title: '数量',
                                    align: "center",
                                    formatter: function (value, row, index) {
                                        return ["<input id='" + index + "shangpinshuliang' placeholder='商品数量' " +
                                        "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>"]
                                    }
                                }, {
                                    field: 'shangpinshoujia',
                                    title: '售价',
                                    align: "center",
                                    // visible: false,
                                    formatter: function (value, row, index) {
                                        return ["<input id='" + index + "shangpinshoujia' placeholder='商品售价' " +
                                        "class='form-control' value='" + (value === undefined ? '' : value) + "' onblur='getValues(" + index + ")'>"]
                                    }
                                }, {
                                    field: 'index',
                                    title: '序列',
                                    align: "center",
                                    width: '20px',
                                    // visible: false,
                                    formatter: function (value, row, index) {
                                        return row.index = index + 1; //返回行号
                                    }
                                },
                            ]
                        };
                        $.table.init(options);
                    })

                    //添加行
                    function addRow() {
                        var row =
                            {
                                "shangpinming": "",
                                "shangpinbianhao": "",
                                "shangpinleibie": "",
                                "shengchanchangshang": "",
                                "shangpinguigekuan": 0,
                                "shangpinguigegao": 0,
                                "shangpinkaixiang": "",
                                "shangpinshuliang": 0,
                                "shangpinshoujia": 0
                            };
                        //append  追加到最后一行
                        //prepend  新增到第一行
                        $('#bootstrap-table').bootstrapTable('append', row);
                        //更新行数据
                        $('#bootstrap-table').bootstrapTable('updateRow', row);
                        //定位到最后一行
                        $('#bootstrap-table').bootstrapTable('scrollTo', 'bottom');
                    }

                    function getValues(index) {
                        const rows = $('#bootstrap-table').bootstrapTable('getData');
                        $.each(rows, function (i, row) {
                            if (row.index === (index + 1)) {
                                row.shangpinleibie = $("#" + index + "shangpinleibie").val();
                                row.shengchanchangshang = $("#" + index + "shengchanchangshang").val()
                                row.shangpinguigekuan = $("#" + index + "shangpinguigekuan").val();
                                row.shangpinguigegao = $("#" + index + "shangpinguigegao").val();
                                row.shangpinkaixiang = $("#" + index + "shangpinkaixiang").val();
                                row.shangpinshuliang = $("#" + index + "shangpinshuliang").val();
                                row.shangpinshoujia = $("#" + index + "shangpinshoujia").val();
                                $('#bootstrap-table').bootstrapTable('updateRow', row);
                                // return false;
                            }
                        });
                        document.getElementById('shangpinbianhao').value = JSON.stringify($('#bootstrap-table').bootstrapTable('getData'))
                        zongjineReSet()
                    }

                    function getValuesName(index) {
                        // console.log(index)
                        var rows = $('#bootstrap-table').bootstrapTable('getData');
                        var rowRemove = []
                        $.each(rows, function (i, row) {
                            if (row.index === (index + 1)) {
                                // console.log()
                                rowRemove[0] = row.index
                                rowRemove.push(row.index)
                                // console.log(row)
                                var msgStr = $("#" + index + "shangpinming").val()
                                var data = [];
                                $.ajax({
                                    type: "POST",
                                    datatype: "string",
                                    url: "/api/shangPinXiangQing",
                                    data: {"danhao": msgStr},
                                    async: false,
                                    success: function (result) {
                                        if (result !== null) {
                                            data = result
                                        }
                                    }
                                });

                                var rowNew = [];
                                var check = false;
                                rows.forEach((row) => {
                                    if (row.shangpinbianhao == data["shangpinbianhao"]) {
                                        check = true
                                        row.shangpinshuliang = Number(row.shangpinshuliang) + Number(1)
                                        $('#bootstrap-table').bootstrapTable('updateRow', row);
                                    }
                                })
                                if (!check) {
                                    rowNew =
                                        {
                                            "shangpinming": data["shangpinming"] !== null ? data["shangpinming"] : undefined,
                                            "shangpinbianhao": data["shangpinbianhao"] !== null ? data["shangpinbianhao"] : undefined,
                                            "shengchanchangshang": data["shengchanchangshang"] !== null ? data["shengchanchangshang"] : undefined,
                                            "shangpinleibie": data["shangpinleibie"] !== null ? data["shangpinleibie"] : undefined,
                                            "shangpinguigekuan": data["shangpinguigekuan"],
                                            "shangpinguigegao": data["shangpinguigegao"],
                                            "shangpinkaixiang": data["shangpinkaixiang"] !== null ? data["shangpinkaixiang"] : undefined,
                                            "shangpinshuliang": 1,
                                            "shangpinshoujia": data["shangpinshoujia"]
                                        };
                                    //append  追加到最后一行
                                    //prepend  新增到第一行
                                    $('#bootstrap-table').bootstrapTable('append', rowNew);
                                    //更新行数据
                                    $('#bootstrap-table').bootstrapTable('updateRow', rowNew);
                                    //定位到最后一行
                                    $('#bootstrap-table').bootstrapTable('scrollTo', 'bottom');
                                }
                                return false;
                            }
                        });

                        $('#bootstrap-table').bootstrapTable('remove', {
                            field: 'index',
                            values: rowRemove
                        });
                        zongjineReSet()
                        document.getElementById('shangpinbianhao').value = JSON.stringify($('#bootstrap-table').bootstrapTable('getData'))
                    }

                    function removeRow() {
                        var rows = $('#bootstrap-table').bootstrapTable('getSelections');//获取选中行
                        if (rows.length === 0) {
                            layer.msg("请选择要删除的数据");
                            return;
                        }
                        var indexs = [];
                        for (var i = 0; i < rows.length; i++) {
                            indexs[i] = rows[i].index;
                        }
//删除
                        $('#bootstrap-table').bootstrapTable('remove', {
                            field: 'index',
                            values: indexs
                        });
                        // console.log(Number($('#zongjine').val()))
                        // console.log(Number(zongjine))
                        zongjineReSet()
                        document.getElementById('shangpinbianhao').value = JSON.stringify($('#bootstrap-table').bootstrapTable('getData'))
                    }

                    function zongjineReSet() {
                        const rows = $('#bootstrap-table').bootstrapTable('getData');
                        var zongjine = 0;
                        $.each(rows, function (i, row) {
                            zongjine += Number(row.shangpinshuliang) * Number(row.shangpinshoujia)
                        });
                        document.getElementById("zongjine").value = zongjine
                    }
                </script>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">总金额
                ：</label>
            <div class="col-sm-8">
                <input id="zongjine" name="zongjine" class="form-control" type="text">
            </div>
        </div>
    </form>
    <form class="form-horizontal m" id="form-qita-add">
        <div class="form-group">
            <div class="col-sm-12">
                <div>
                    <label class="col-sm-3 control-label is-required">费用使用人：</label>
                    <div class="col-sm-8">
                        <input id="myULTags" name="fahuoren" class="form-control" type="text" required>
                    </div>
                    <datalist id="userList" th:with="type=${@vpaibanMapper.selectUser()}">
                        <option th:each="lists : ${type}"
                                th:text="${lists.getUsername()}"
                                th:value="${lists.getUsername()}"></option>
                    </datalist>
                </div>
                <script>
                    $('#myULTags').tagit({
                        availableTags: [],
                        itemName: 'item',
                        fieldName: 'tag'
                    });
                    $("li").find("input").attr("list", "userList")

                    function checkRemove() {
                        var a = 0
                        while (a < 1000) {
                            var element = $("span[class='ui-helper-hidden-accessible']");
                            if (element) {
                                element.remove()
                                time.Sleep(5000)
                            }
                            a++
                        }
                    }
                </script>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">费用使用日期：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="dateForString"
                           th:value="${#dates.format(#dates.createNow(),'yyyy-MM-dd HH:mm:ss')}"
                           class="form-control" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">费用金额：</label>
            <div class="col-sm-8">
                <input name="zongjine" class="form-control" type="number" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">费用类型：</label>
            <div class="col-sm-8">
                <textarea name="leixing" class="form-control" type="text" required></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">费用备注
                ：</label>
            <div class="col-sm-8">
                <textarea name="beizhu" class="form-control" required></textarea>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "tongji/qita"
    var TYPE = "1"
    tabBarClick(TYPE)
    $("#form-qita-add").validate({
        focusCleanup: true
    });
    $("#form-huosun-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            if (TYPE == "1") {
                $.operate.save(prefix + "/addSave/" + TYPE, $('#form-huosun-add').serialize());
            } else {
                $.operate.save(prefix + "/addSave/" + TYPE, $('#form-qita-add').serialize());
            }
        }
    }

    function tabBarClick(type) {
        TYPE = type
        var btn1 = document.getElementById("tabBarClick1")
        var btn2 = document.getElementById("tabBarClick2")
        var form1 = document.getElementById("form-huosun-add")
        var form2 = document.getElementById("form-qita-add")
        if (type == '1') {
            btn1.className = "btn btn-default"
            btn2.className = "btn btn-success"
            $.form.reset("form-qita-add")
            form2.style.display = "none"
            form1.style.display = "block"
        } else {
            btn2.className = "btn btn-default"
            btn1.className = "btn btn-success"
            $.form.reset("form-huosun-add")
            form1.style.display = "none"
            form2.style.display = "block"
            $('#bootstrap-table').bootstrapTable('removeAll')
            checkRemove()
        }
    }
</script>
</body>
</html>